<template>
	<div :class="$hasEditPermission('/BHView') ? '' : 'maskDisabled1'" class="cps-view cps-view-tabel">
		<tabFiveTabelShow v-if="isShow" type="basic" title="書籍フォルダ" @close="isShow = false" @getResponse="getResponse">
		</tabFiveTabelShow>
		<ImportDialogForPic v-if="isUpShow" :_api="api" @close="isUpShow = false" :title="title"
			@getResponse="getResponse" :type="1">
		</ImportDialogForPic>
		<div :class="$hasEditPermission('/BHView') ? '' : 'maskDisabled2'" class="content-view" style="width: 1029px;padding: 8px 16px;">
			<!-- <div class="title-view">
				<span>
					{{ $t('message.BSCps.pictureAssociationCps.label_1') }}
				</span>
				<div>
					<p class="r-describe">
						<el-button class="black-btn"
							style="line-height: 0;height: 28px !important;width: 140px !important;margin: 0 0 0 10px;"
							@click="isShow = true">
							<span>フォルダーを開く</span>
						</el-button>
						<el-button class="black-btn"
							style="line-height: 0;height: 28px !important;width: 140px !important;margin: 0 0 0 10px;"
							@click="isUpShow = true">
							<i class="iconfont" style="font-size:16px;">&#xe825;</i>
							<span>アップロード</span>
						</el-button>
						<el-button class="black-btn"
							style="line-height: 0;height: 28px !important;width: 140px !important;margin: 0 0 0 10px;"
							@click="downLoadFn">
							<i class="iconfont"></i>
							<span>ダウンロード</span>
						</el-button>
					</p>
				</div>
			</div> -->

			<div class="tips">
				<span>関連図書</span>
				<div v-if="$hasEditPermission('/BHView')">
					<el-button type="default" size="mini" @click="isShow = true">フォルダーを開く</el-button>
					<el-button type="default" size="mini" @click="isUpShow = true"><i class="iconfont"
							style="font-size:16px;">&#xe825;</i>アップロード</el-button>
					<el-button type="default" size="mini" @click="downLoadFn"><i class="iconfont"
							style="font-size: 20px;"></i>ダウンロード</el-button>
				</div>
			</div>

			<div style="width: 100%;">
				<ux-grid ref="singleTable" :data="prposTabelData" style="width: 100%;" :header-cell-style="{
					color: 'rgba(0, 0, 0, 0.85)',
					fontSize: '14px',
					textAlign: 'left',
					fontWeight: 'bold',
					padding: 0,
					height: '32px',
				}" :cell-style="{
					color: 'rgba(96,98,102,1)',
					fontSize: '14px',
					textAlign: 'left',
					padding: 0,
					height: '32px',
				}" :row-style="{
					color: 'rgba(96,98,102,1)',
					fontSize: '13px',
					textAlign: 'left',
					padding: 0,
					height: '32px',
				}" @current-change="handleCurrentChange" highlight-current-row :height="tableHeight" v-loading="loading"
					element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
					:element-loading-text="$t('message.bhView.loading')">
					<template slot="empty"> No data </template>
					<ux-table-column property="bookTil" :title="$t('message.BSCps.pictureAssociationCps.label_2')"
						width="429">

						<template slot-scope="scope">
							<el-input v-model="scope.row.bookTil"
								@input="scope.row.bookTil = $setMaxLength(scope.row.bookTil, 25)"></el-input>
						</template>
					</ux-table-column>
					<ux-table-column property=" bookName" :title="$t('message.BSCps.pictureAssociationCps.label_3')"
						width="429">

						<template slot-scope="scope">
							<p>{{ scope.row.bookName }}</p>
						</template>
					</ux-table-column>
					<ux-table-column property="wrk_cls_name" :title="$t('message.BSCps.pictureAssociationCps.label_4')"
						wodth="138">

						<template slot-scope="scope">
							<div class="table-msg-view">
								<span @click="DelFn(scope.row)">{{ $t("message.public.delete") }}</span>
							</div>
						</template>
					</ux-table-column>
				</ux-grid>
			</div>
		</div>
	</div>
</template>

<script>
import $ from "jquery";
import { getLocalStorage } from "../../../utils/storage";
import { GetBookRelaList, UpdBookRela, delThckDeterminatorTipsMsg, getFileTit, GetNoFileTipsMsg } from "@/api/api";
import tabFiveTabelShow from './tabFiveTabelShow.vue';
import ImportDialogForPic from '@/components/Excel/ImportDialog/ImportDialogForPic.vue';
import _ from 'lodash-es';
export default {
	name: "PictureAssociationCps",
	data() {
		return {
			userData: getLocalStorage('userData'),
			prposTabelData: [],
			prposTabelDataClone: [],
			tableHeight: 350,
			loading: false,
			isShow: false,
			isUpShow: false,
			api: '/api/Visual/UpLoadBookRelaAssFile',
			title: this.$t("message.BSCps.tabs.label_5"),
			currentItem: {}
		};
	},
	components: { tabFiveTabelShow, ImportDialogForPic },
	watch: {
		macNamebValue: {
			deep: true,
			handler: function (newV, oldV) {
				this.initFn();
			},
		},
		prposTabelData: {
			deep: true,
			handler: function (newV, oldV) {
				this.$emit('DataChangeFn', !_.isEqual(this.prposTabelData, this.prposTabelDataClone))
			},
		},
	},
	computed: {
		macNamebValue() {
			return this.$store.state.macNameb;
		},
	},
	methods: {
		async getResponse(arr) {
			// this.$message.success("OK");
			let bookTil = await this.getFileTitFn();
			arr.forEach(item => {
				this.prposTabelData.push({
					bookName: item.showPath || `${item.name}.${item.ext}`,
					bookNo: this.prposTabelData.length + 1,
					bookPath: item.path,
					bookTil: `${bookTil}${this.prposTabelData.length + 1}`,
					fileId: item.id,
				})
			})
		},
		async delFn(item) {
			let R = await delThckDeterminatorTipsMsg({})
			this.$confirm(R.data.msg, '', {
				confirmButtonText: 'OK',
				cancelButtonText: 'Cancel',
				type: 'warning'
			}).then(async () => {
				this.prposTabelData = this.prposTabelData.filter(i => i.fileId != item.fileId);
			}).catch(() => {
			});
		},
		handleCurrentChange(val) {
			console.log(val);
			this.currentItem = val;
		},
		downLoadFn() {
			if (this.prposTabelData.length == 0 || !this.currentItem.bookPath) {
				return
			}
			if (this.currentItem) {
				// サブフォルダ対応：表示上はサブフォルダ表示もダウンロード時はファイル名指定
				const fileName = this.currentItem.bookName.split('\\').pop();
				this.$downFileByBlob({ path: this.currentItem.bookPath, isDown: true, fileName: fileName, isOpenNewBlank: false })
			}
		},
		async GetBookRelaListApi() {
			let dataJson = {
				PltCode: this.$store.state.pltCode,
				dmgCode: this.$store.state.macCode
			}
			let res = await GetBookRelaList(dataJson);
			if (res.data.code == -310) {
				this.prposTabelData = [];
				return
			}
			this.prposTabelData = _.cloneDeep(res.data.data);
			this.prposTabelDataClone = _.cloneDeep(res.data.data);
			this.$emit('DataChangeFn', false)
		},
		async getFileTitFn() {
			let dataJson = {};
			let res = await getFileTit(dataJson);
			return res.data.data;
		},
		// 削除
		async DelFn(row) {
			this.prposTabelData = this.prposTabelData.filter(item => item != row);
			console.log(this.prposTabelData);
		},
		initFn() {
			this.GetBookRelaListApi();
			// setTimeout(() => {
			// 	this.prposTabelData = [];
			// }, 100);
		},
		setTable() {
			this.$refs.singleTable.refreshColumn();
		}
	},
	created() {
		// let that = this;
		// this.$nextTick(function () {
		// 	let heightStyle = $(".cps-view-tabel").height() - 46;
		// 	that.tableHeight = heightStyle;
		// });
	},
	mounted() {
		let heightStyle = $(".cps-view").height();
		this.tableHeight = heightStyle - 66;
		this.initFn();
		// let that = this;
		// window.addEventListener(
		// 	"resize",
		// 	() => {
		// 		return (() => {
		// 			let heightStyle = $(".cps-view-tabel").height() - 46;
		// 			that.tableHeight = heightStyle;
		// 		})();
		// 	},
		// 	false
		// );
		// setTimeout(() => {
		// 	this.prposTabelData.push({})
		// }, 1000);
	},
	beforeDestroy() { },
	destroyed() { },
};
</script>

<style lang="scss" scoped>
.cps-view {
	// position: relative;
	height: 100%;
	width: 100%;
	border: 1px solid #d3d3d3;
	max-height: calc(100% - 41px);
	// overflow: hidden;
	overflow-y: auto;

	.content-view {
		width: 1020px;
		width: 100%;

		.tips {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8px 0;
			font-weight: 700;

			.el-button {
				height: 28px;
				line-height: 0px;
				line-height: 0;
				height: 28px !important;
				width: 140px !important;
				margin: 0 0 0 10px;
			}
		}
	}

	.title-view {
		width: 100%;
		height: 45px;
		display: flex;
		align-items: center;
		// padding: 0 10px;
		justify-content: space-between;

		span {
			// color: rgba(0, 0, 0, 0.85);
			// font-weight: bold;
			border-bottom: 0 none;
		}
	}

	.footer-message {
		width: 100%;
		height: 30px;
		display: flex;
		align-items: center;
		padding: 0 10px;
		background: #edeeef;
		color: #000;
	}

	.footer {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin: 14px 0 0 0;

		button {
			width: 82px;
			height: 32px;
			background: #ffffff;
			border: 1px solid #d9d9d9;
			text-align: center;
			line-height: 32px;
			margin-right: 16px;
		}

		.okBTn {
			background: #106ebe;
			color: #fff;
		}
	}

	.table-msg-view {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #106EBE;
		font-size: 14px;

		span {
			cursor: pointer;
		}

		.solid {
			width: 1px;
			height: 14px;
			margin: 0 8px;
			cursor: none;
			background: rgba(233, 233, 233, 1);
		}
	}

	.table-msg-view-gray {
		color: rgba(128, 128, 128, 0.479) !important;
	}

	.table-msg-view-gray1 {
		cursor: not-allowed !important;

	}
}



.r-describe {
	display: flex;
	align-items: center;

	.el-icon-upload2,
	.el-icon-download,
	.el-icon-delete-solid,
	.el-icon-refresh {
		font-size: 24px;
		// margin: 0 8px;
		cursor: pointer;
	}
}

.black-btn {
	padding: 0 8px;
	height: 32px;
	font-size: 14px;
	// color: rgba(0, 0, 0, 0.65);
	border-radius: 4px;
	// font-weight: 500;
	margin: 0 8px;
	// border: 1px solid #d9d9d9;
	display: flex;
	align-items: center;

	span {
		margin: 0 0 0 8px;
	}
}

.table-msg-view {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: rgba(234, 43, 58, 1);
	font-size: 14px;

	span {
		cursor: pointer;
	}

	.solid {
		width: 1px;
		height: 14px;
		margin: 0 8px;
		cursor: none;
		background: rgba(233, 233, 233, 1);
	}
}

::v-deep .el-input__inner {
	background: none;
	border: 0 none;
	padding: 0;
}
</style>
